import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:tender_flutter/constant/theme_colors.dart';

typedef NetImageClickAction<T> = void Function(ExtendedImageState state);

class MyNetImage extends StatefulWidget {
  final String url;
  final double width;
  final double height;
  final int retries = 3;
  final bool cache;
  final BoxBorder border;
  final BorderRadius radius;
  final BoxFit fit;
  final BoxShape shape;
  final Image placeholder;
  final NetImageClickAction imageClickAction;

  const MyNetImage(
      {Key key,
      this.url,
      this.width,
      this.height,
      this.border,
      this.radius,
      this.cache,
      this.fit,
      this.shape,
      this.placeholder,
      this.imageClickAction})
      : super(key: key);

  @override
  _NetImageState createState() => _NetImageState();
}

class _NetImageState extends State<MyNetImage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
        vsync: this,
        duration: const Duration(milliseconds: 500),
        lowerBound: 0.0,
        upperBound: 1);
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _image();
  }

  /// 图片
  Widget _image() {
    return ExtendedImage.network(
      widget.url,
      width: widget.width,
      height: widget.height,
      fit: widget.fit,
      cache: widget.cache ?? true,
      border: widget.border,
      shape: widget.shape,
      borderRadius: widget.radius,

      // ignore: missing_return
      loadStateChanged: (ExtendedImageState state) {
        switch (state.extendedImageLoadState) {
          case LoadState.loading:

            /// 加载中
            _controller.reset();
            return Shimmer.fromColors(
              baseColor: Colors.grey[300],
              highlightColor: Colors.grey[100],
              child: Container(
                  decoration: BoxDecoration(
                    color: ThemeColors.colorType21,
                    borderRadius: widget.radius,
                  ),
                  width: widget.width,
                  height: widget.height),
            );
            break;

          case LoadState.completed:

            /// 加载完成
            _controller.forward();
            return GestureDetector(
                onTap: () {
                  if (widget.imageClickAction != null) {
                    widget.imageClickAction(state);
                  }
                },
                child: FadeTransition(
                  opacity: _controller,
                  child: ClipRRect(
                    borderRadius: widget.radius,
                    child: ExtendedRawImage(
                      image: state.extendedImageInfo?.image,
                      fit: widget.fit != null ? widget.fit : BoxFit.cover,
                      // width: ScreenUtil.instance.setWidth(600),
                      // height: ScreenUtil.instance.setWidth(400),
                    ),
                  ),
                ));
            break;
          case LoadState.failed:
            // 加载失败
            if (widget.placeholder != null) {
              return Container(
                  alignment: Alignment.center,
                  child: widget.placeholder,
                  decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: widget.radius,
                  ));
            } else {
              return GestureDetector(
                child: Container(
                    alignment: Alignment.center,
                    child: Text(
                      "fail",
                      textAlign: TextAlign.center,
                    ),
                    decoration: BoxDecoration(
                      color: Colors.grey[300],
                      borderRadius: widget.radius,
                    )),
                onTap: () {
                  state.reLoadImage();
                },
              );
            }
            break;
        }
      },
    );
  }
}
